<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>删除练习</title>
    <style>

        #total {
            width: 450px;
            margin-left: auto;
            margin-right: auto;
        }

        ul {
            list-style-type: none;
        }

        li {
            border-style: solid;
            border-width: 1px;
            padding: 5px;
            margin: 5px;
            background-color: #99ff99;
            float: left;
        }

        .inner {
            width: 400px;
            border-style: solid;
            border-width: 1px;
            margin: 10px;
            padding: 10px;
            float: left;
        }

        #employeeTable {
            border-spacing: 1px;
            background-color: black;
            margin: 80px auto 10px auto;
        }

        th, td {
            background-color: white;
        }

        #formDiv {
            width: 250px;
            border-style: solid;
            border-width: 1px;
            margin: 50px auto 10px auto;
            padding: 10px;
        }

        #formDiv input {
            width: 100%;
        }

        .word {
            width: 40px;
        }

        .inp {
            width: 200px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {

            var Alla = document.getElementsByTagName('a');
            //console.log(Alla);
            for (var i = 0; i < Alla.length; i++) {
                Alla[i].onclick = function () {
                    //alert(this);
                    var tr = this.parentNode.parentNode;

                    //var name1 = tr.getElementsByTagName("td")[0].innerHTML;
                    var name = tr.children[0].innerHTML;

                    var flag = confirm('确认删除' + name + '吗');

                    if (flag) {
                        tr.parentNode.removeChild(tr);
                    }
                    return false;
                };

            }
            ;
            var addEmpButton = document.getElementById('addEmpButton');
            addEmpButton.onclick = function () {
                //alert('hello');

                var name1 = document.getElementById('empName').value;
                var email = document.getElementById('email').value;
                var salary = document.getElementById('salary').value;
                //alert(name1+','+email+','+salary);

            };
        };
    </script>
</head>
<body>
<table id="employeeTable">
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Salary</th>
        <th>&nbsp;</th>
    </tr>
    <tr>
        <td>Tom</td>
        <td>tom@tom.com</td>
        <td>5000</td>
        <td><a href="javascript:;">Delete</a></td>
    </tr>
    <tr>
        <td>Jerry</td>
        <td>jerry@sohu.com</td>
        <td>8000</td>
        <td><a href="deleteEmp?id=002">Delete</a></td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>bob@tom.com</td>
        <td>10000</td>
        <td><a href="deleteEmp?id=003">Delete</a></td>
    </tr>
</table>

<div id="formDiv">

    <h4>添加新员工</h4>

    <table>
        <tr>
            <td class="word">name:</td>
            <td class="inp">
                <input type="text" name="empName" id="empName"/>
            </td>
        </tr>
        <tr>
            <td class="word">email:</td>
            <td class="inp">
                <input type="text" name="email" id="email"/>
            </td>
        </tr>
        <tr>
            <td class="word">salary:</td>
            <td class="inp">
                <input type="text" name="salary" id="salary"/>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <button id="addEmpButton" value="abc">
                    Submit
                </button>
            </td>
        </tr>
    </table>

</div>
</body>
</html>